<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>具体番剧介绍</title>
		
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" href="../css/bootstrap.css">
		
		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}

		</style>
	</head>
	<body>
		
		<!--导航栏开始-->
		<div class="col shadow-sm">
			<nav class="navbar p-1 navbar-expand-lg navbar-light bg-white">
			  <a class="navbar-brand" href="#">
				  <img src="../img/logo1.png" class="img-fluid" style="max-width:80px;">
			  </a>
			  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			    <span class="navbar-toggler-icon"></span>
			  </button>
			
			  <div class="collapse navbar-collapse" id="navbarSupportedContent">
			    <ul class="navbar-nav mr-auto">
			      <li class="nav-item active">
			        <a class="nav-link" href="#">主站<span class="sr-only">(current)</span></a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">番剧</a>
			      </li>
			    </ul>
				
			    <form class="form-inline my-2 my-lg-0 ">
			      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
			      <button class="btn btn-outline-dark my-2 my-sm-0" type="submit">搜索</button>
			    </form>
				
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
					  <a class="nav-link" href="#"></a>
					</li>
					<li class="nav-item">
					  <a class="nav-link" href="#">
						  <img src="../img/logo.png" class="user"></a>
					</li>
					<li class="nav-item">
					  <a class="nav-link" href="#">消息</a>
					</li>
					<li class="nav-item">
					  <a class="nav-link" href="#">动态</a>
					</li>
				    <li class="nav-item">
				      <a class="nav-link" href="#">收藏</a>
				    </li>
				    <li class="nav-item">
				      <a class="nav-link" href="#">历史</a>
				    </li>
				</ul>
			  </div>
			</nav>
		</div>
		<!--导航栏结束-->
		
		<!--简介开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-12">

						 <div class="card mb-3" >
						   <div class="row no-gutters">
						     <div class="col-md-4">
						       <img src="..." class="card-img" alt="...">
						     </div>
						     <div class="col-md-8">
						       <div class="card-body">
						         <h5 class="card-title">鬼灭之刃（中配） </h5>
						         <p class="card-text">简介：大正时期，日本。心地善良的卖炭少年·炭治郎，有一天他的家人
								 被鬼杀死了。而唯一幸存下来的妹妹——祢豆子变成了鬼。被绝望的现实打垮的炭治郎，为了寻找让
								 妹妹变回人类的方法，决心朝着“鬼杀队”的道路前进。人与鬼交织的悲哀的兄妹的故事，现在开始！</p>
						         <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
								 <a href="#" class="btn btn-primary">追番</a>
						       </div>
						     </div>
						   </div>
						 </div>
					</div>
					
				</div>
				
			</div>
		</section>
		
		<!--简介结束-->
		
		<!--作品详情+评论开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<nav>
						  <div class="nav nav-tabs" id="nav-tab" role="tablist">
						    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">作品详情</a>
						    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">短评</a>
						    <a class="nav-item nav-link disabled" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">长评</a>
						  </div>
						</nav>
						<div class="tab-content" id="nav-tabContent">
						  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
							  <div class="card mt-4">
							  	<div class="card-body">
							  	  <h5 class="card-title">作品详情</h5>
							  		<hr />
									<p class="card-text">正片</p>
									<span th:with="episodes=${fan.episodes}">
											  <span th:if="${episodes<10}">
												  <span th:each="i:${#numbers.sequence(1,episodes)}">
													  <a href="#" class="btn btn-primary mt-1 py-2">0[[${i}]]</a>
												  </span>
											  </span>
											  <span th:unless="${episodes<10}">
												  <span th:each="i:${#numbers.sequence(1,9)}">
													<a href="#" class="btn btn-primary mt-1 py-2">0[[${i}]]</a>
												  </span>
												  <span th:each="i:${#numbers.sequence(10,episodes)}">
													<a href="#" class="btn btn-primary mt-1 py-2">[[${i}]]</a>
												  </span>
											  </span>
										  </span>
							  		<hr />

									<h5 class="card-title">相关推荐</h5>
									<div class="media mt-4">
										<img th:src="@{/img/fan01.png}" class="align-self-start mr-3" alt="...">
										<div class="media-body">
											<h5 class="mt-0">在地下城寻求邂逅是否搞错了什么</h5>
											<p>简介：迷宫都市欧拉丽是一座拥有雄伟地下迷宫（通称“地下城”）的巨大都市。为了实现英雄故事中“在地下城邂逅迷人女主角”而进入迷宫的少年贝尔·克朗尼，却被强大怪物“弥诺陶洛斯”袭击。危急之际，顶尖冒险者艾丝·华伦斯坦出面拯救了贝尔，被艾丝的英勇举动感动的贝尔更因此爱慕着对方，将对方当成目标，希望能成为配得上她的男人。</p>
										</div>
									</div>

									<div class="media mt-4">
										<img th:src="@{/img/fan02.png}" class="align-self-start mr-3" alt="...">
										<div class="media-body">
											<h5 class="mt-0">在地下城寻求邂逅是否搞错了什么 第二季</h5>
											<p>简介：这座城市住着众多的神，其中心存在着通往地心深处——深渊的“地下城”。城市的名字是迷宫都市欧拉丽。女神赫斯缇雅与冒险者贝尔·克朗尼，一如既往地是主神和仅仅一名眷族的最小构成。但达成了世界最快升级这一伟业的贝尔，开始受到前所未有的的万众瞩目——迷宫中的相遇，以及冒险——这是再次开始编织的，少年所走过的，女神所记录的【眷族物语】</p>
										</div>
									</div>

									<div class="media mt-4">
										<img th:src="@{/img/fan03.png}" class="align-self-start mr-3" alt="...">
										<div class="media-body">
											<h5 class="mt-0">在地下城寻求邂逅是否搞错了什么 第三季</h5>
											<p>简介：这座城市住着众多的神，其中心存在着通往地心深处——深渊的“地下城”。城市的名字是迷宫都市欧拉丽。女神赫斯缇雅与冒险者贝尔·克朗尼，一如既往地是主神和仅仅一名眷族的最小构成。但达成了世界最快升级这一伟业的贝尔，开始受到前所未有的的万众瞩目——迷宫中的相遇，以及冒险——这是再次开始编织的，少年所走过的，女神所记录的【眷族物语】</p>
										</div>
									</div>
							  				
							  	</div>
							  </div>
						  </div>
						  
						  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
							  <div class="card mt-4">
							  	<ul class="list-unstyled">
							  	  <li class="media my-2 ml-3">
							  	    <img src="../img/70_70.jpg" class="mr-3 profile" alt="...">
							  	    <div class="media-body">
							  	      <h5 class="mt-0 mb-1">该用户已注销</h5>
							  	      <small class="text-muted">15小时前</small>
							  		  <button type="button" class="btn btn-secondary float-right mr-5">...</button>
							  			<hr />
										<p>发现了一些待解决的bug...</p>
							  	    </div>
							  	  </li>
							  	  <hr />
							  	  <li class="media my-2 ml-3">
							  	    <img src="../img/70_70.jpg" class="mr-3 profile" alt="...">
							  	    <div class="media-body">
							  	      <h5 class="mt-0 mb-1">该用户已注销</h5>
							  	      <small class="text-muted">1月27日</small>
							  		  <button type="button" class="btn btn-secondary float-right mr-5">...</button>
							  			<hr />
							  			<p>现在电脑剩余电量还有21%，也不知道能不能支撑我学习完...</p>
							  		</div>
							  	  </li>	
												
							  	  <hr />
							  	  <li class="media my-2 ml-3">
							  	    <img src="../img/70_70.jpg" class="mr-3 profile" alt="...">
							  	    <div class="media-body">
							  	      <h5 class="mt-0 mb-1">该用户已注销</h5>
							  	      <small class="text-muted">11月27日</small>
							  		  <button type="button" class="btn btn-secondary float-right mr-5">...</button>
							  			<hr />
							  			<p>现在电脑剩余电量还有21%，也不知道能不能支撑我学习完...</p>
							  	    </div>
							  	  </li>
								  
							  	  <hr />
							  	  <li class="media my-2 ml-3">
							  	    <img src="../img/70_70.jpg" class="mr-3 profile" alt="...">
							  	    <div class="media-body">
							  	      <h5 class="mt-0 mb-1">该用户已注销</h5>
							  	      <small class="text-muted">7月11日</small>
							  	  	  <button type="button" class="btn btn-secondary float-right mr-5">...</button>
							  			<hr />
							  			<p>现在电脑剩余电量还有21%，也不知道能不能支撑我学习完...</p>
							  		</div>
							  	  </li>
							  	  <hr >
							  	</ul>
							  				
							  </div>
						  </div>
						  
						</div>

					</div>
				</div>
				
			</div>
		</section>
		
		<!--作品详情+评论结束-->
		
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.bundle.js"></script>
	</body>
</html>
